<template>
  <div class="admin_address_wrap" @touchmove.stop="stop_slider" @touchstart="start_slider">
    <cancle-cause v-if="cancleCause" @confirm="confirm" @cancle="cancle" :cancleList="cancleCauseList"></cancle-cause>
    <div class="fixd_wrap">
      <back :title="'订单详情'"></back>
    </div>
    <div class="orders_wrap" ref="scroll_wrap">
      <div class="head_wrap">
             <h6 v-if="data.is_cancel===1">{{data.is_cancel===0?'未取消':'已取消'}}</h6>
             <div v-if="m"><span>剩余</span><b>{{h}}:{{m}}:{{s}}</b><p>自动取消订单</p></div>
             <p>订单号：{{data.orderid}}</p>
             <p>{{data.addtime}}</p>
         </div>
      <div class="duan_wrap">
         <div>
           <p>
             <span>1</span>
             <b>下单</b>
           </p>
           <div>
             <p></p>
             <h6 :style="{width:index*25+'%'}"></h6>
              <ul>
                <li>
                  <div>
                    <i  :class="index>0?'active1':''">2</i>
                    <p>付款</p>
                  </div>
                  <span></span>
                </li>
                <li>
                  <div>
                    <i :class="index>1?'active2':''">3</i>
                    <p>配货</p>
                  </div>
                  <span></span>
                </li>
                <li>
                  <div>
                    <i  :class="index>2?'active3':''">4</i>
                    <p>出库</p>
                  </div>
                  <span></span>
                </li>
                <li>
                  <div>
                    <i  :class="index>3?'active4':''">5</i>
                    <p>完成</p>
                  </div>
                  <span></span>
                </li>
              </ul>
           </div>
         </div>
      </div>
      <div class="info_wrap" v-if="data.accepttime">
        <div>
          <p><span>收货地址：</span><b>{{data.address[0].address}}</b></p>
          <p><span>联系人：</span><b>{{data.address[0].names}}</b></p>
          <p><span>联系电话：</span><b>{{data.address[0].phone}}</b></p>
          <p><span>收货时间：</span><b>{{data.accepttime}}</b></p>
          <p><span>支付方式：</span><b>{{payType}}</b></p>
          <p><span>配送方式：</span><b>{{data.deliveryWay===0?'铭材快递':'自提'}}</b></p>
          <p><span>搬运信息：</span><b>{{data.upstairsWay}}</b></p>
          <p><span>是否付款：</span><b :class="data.recept===0?'red':'green'">{{data.recept===0?'未付款':'已付款'}}</b></p>
          <p v-if="data.recept!==0"><span>是否退款：</span><b>{{data.is_refund ===0?'已退款':'未退款'}}</b></p>
          <p><span>订单备注：</span><b>{{data.remark?data.remark:'无'}}</b></p>
        </div>

      </div>
      <div class="items_wrap" v-if="items.length">
        <p>
          <span>商品清单</span>
          <b>数量</b>
        </p>
        <div class="items_content">
          <div v-for="(item , index) in items" v-if="index<(show?items.length:3)">
            <p>
              <img :src="item.img" alt="">
            </p>
            <div>
              <p>{{item.names}}</p>
              <div>
                <p>¥{{item.price}}</p>
                <span>{{item.amount}}</span>
              </div>
            </div>
          </div>
        </div>
        <p class="show" v-if="!show&&items.length>3" @click="show=!show">展开全部清单</p>
        <p class="mini" v-if="show&&items.length>3" @click="show=!show">收起清单</p>
      </div>
      <div class="price_wrap">
        <div>
          <p><span>累计货款</span><b>¥{{data.goodsPrice }}</b></p>
          <p><span>搬运费</span><b>¥{{data.haulingPrice}}</b></p>
          <p><span>运费</span><b>¥{{data.carryPrice}}</b></p>
          <p><span>优惠金额</span><b style="color:#999; ">- ¥{{data.discountPrice}}</b></p>
        </div>
      </div>
    </div>
    <div class="pay_wrap">
      <span>总额：¥{{data.totalPrice }}</span>
      <div>
        <span v-if="data.is_cancel===0&&data.status===0&&data.payway!==4"  @click.stop="toPay(data.orderid)">去支付</span>
        <span v-if="data.payway===4&&data.status===0&&data.is_cancel===0">上传凭证</span>
        <span  v-if="data.is_cancel===1||data.status!==0" @click="newBy(data.orderid)">再次购买</span>
        <span  v-if="data.is_cancel===0&&data.status===0" @click="cancleOrder(data.orderid)">取消订单</span>
      </div>
    </div>
  </div>
</template>

<script>
  import back from 'components/back'
  import {stop_slider,fill_zero} from 'assets/base/base'
  import {get_cookie} from 'assets/cookie/cookie'
  import {get_order_detial,get_cancle_cause,cancle_order,new_by} from 'api/order'
  import cancleCause from 'components/cancleCause'
  export default {
    name: "orderDetial",
    data(){
      return{
        cancleCause:false,
        cancleCauseList:[],
        items:[],
        index:0,
        data:{},
        show:false,
        h:'',
        m:'',
        s:''
      }
    },
    created(){
      get_cancle_cause({}).then((res)=>{
        if(res.status===200&&res.data.resStatus===0) {
          this.cancleCauseList=res.data.data
          console.log( this.cancleCauseList)
        }else{
          alert(res.data.message)
        }
      })
      get_order_detial({
        orderId:this.$route.query.orderId,
        token:get_cookie('key')
      }).then(res=>{
        if(res.status===200&&res.data.resStatus===0){
          this.data=res.data.data
          this.items=res.data.data.goodsList
          this.index=this.data.status
          if(this.data.noPayAutoLapseTime!==0){
            this.daojishi()
          }
          this.$nextTick(()=>{
            window.scrollTo(0,1)
            window.scrollTo(0,0)
          })
        }
      })
    },
    beforeDestroy(){
      clearInterval(this.timer)
      if(this.iscancle){
        this.$emit('get_order_list')
      }
    },
    computed:{
      payType(){
        switch (this.data.payway){
          case 0:return '在线支付'
          case 1:return '货到付款'
          case 2:return '积分支付'
          case 3:return '自提支付'
          case 4:return '对公打款'
        }
      }
    },
    methods:{
      start_slider(e){
        this.start={
          X:e.touches[0].pageX,
          Y:e.touches[0].pageY
        }
      },
      stop_slider(e){
        stop_slider(e,this.$refs.scroll_wrap,this.start)
      },
      daojishi(){
        this.timer=setInterval(()=>{
          console.log(4)
          let time_num=this.data.noPayAutoLapseTime-new Date().getTime()/1000
          if(time_num<0){
            this.m=''
            clearInterval(this.timer)
          }else{
            this.h=fill_zero(Math.floor(time_num/(60*60)),2);
            this.m=fill_zero(Math.floor(time_num%(60*60)/(60)),2);
            this.s=fill_zero(Math.floor(time_num%(60*60)%(60)),2);
          }

        },1000)
      },
      cancle(){
        this.cancleCause=false
      },
      cancleOrder(id){
        this.cancleOrderId=id
        this.cancleCause=true
      },
      confirm(cancleId){
        this.cancleCause=false
        cancle_order({
          orderId:this.cancleOrderId,
          token:get_cookie('key'),
          offwhy:cancleId
        }).then((res)=>{
          console.log(res)
          if(res.status===200&&res.data.resStatus===0) {
            clearInterval(this.timer)
            this.iscancle=true
            this.index=0
            this.data={}
            this.items=[]
            this.m=''
            get_order_detial({
              orderId:this.$route.query.orderId,
              token:get_cookie('key')
            }).then(res=>{
              console.log(res)
              if(res.status===200&&res.data.resStatus===0){
                this.data=res.data.data
                this.items=res.data.data.goodsList
                this.index=this.data.status
              }
            })
          }
        })
      },
      toPay(orderId){
        this.$router.push({
          path: "/pay",
          query: {
            orderId:orderId,
            form:'orders'
          }
        })
      },
      newBy(id){
        new_by({
          token:get_cookie('key'),
          orderId:id
        }).then(res=>{
          if(res.status===200&&res.data.resStatus===0) {
            this.$router.push('/shop_car')
          }
        })
      },
    },
    components:{
      back,
      cancleCause
    }
  }
</script>

<style scoped lang="scss">
  .admin_address_wrap{
    position: fixed;
    background:#fff;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
  }
  .fixd_wrap{
    max-width: 768px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
  }
  .orders_wrap{
    height: 100%;
    padding-top: 50px;
    padding-bottom: 55px;
    overflow: auto;
    max-width: 768px;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
  }
  .head_wrap{
    padding-left: 20px;
    padding-right: 20px;
    >h6{
      text-align: left;
      font-size: 14px;
    }
    >div{
      height: 30px;
      line-height:30px;
      >span{
        float: left;
        color: #999;
      }
      >b{
        float: left;
        margin-left: 8px;
        color: #f10;
      }
      >p{
        float: left;
        margin-left: 30px;
        color: #999;
      }
    }
    >p{
      height: 21px;
      line-height: 21px;
      text-align: left;
    }
  }
  .duan_wrap{
     width: 90%;
     height: 40px;
     margin: 0 auto;
     >div{
       height: 30px;
       >p{
         float: left;
         width: 20px;
         position: relative;
         >span{
           width: 20px;
           height: 20px;
           border: 1px solid #069254;
           margin-top: 5px;
           border-radius: 50%;
           line-height: 19px;
           display: block;
           background: #069254;
           color: #fff;
         }
         >b{
           position: absolute;
           width: 31px;
           bottom: -16px;
           right: -5px;
         }
       }

       >div{
         height: 30px;
         position: relative;
         margin-left: 20px;
         >p{
           position: absolute;
           width: 100%;
           height: 4px;
           background: #ccc;
           top: 12px;
           z-index: -1;
         }
         >h6{
           position: absolute;
           width: 0;
           height: 4px;
           background: #069254;
           top: 12px;
           z-index: -1;
           transition: all 1s;
         }
         >ul{
           width: 100%;
           >li{
             width: 25%;
             height: 30px;
             padding-top: 1px;
             float: left;
             >div{
               float: right;
               width: 20px;
               position: relative;
              >i{
                width: 20px;
                height: 20px;
                border: 1px solid #069254;
                margin-top: 5px;
                border-radius: 50%;
                line-height: 19px;
                display: block;
                background: #fff;
                transition: all 1s;
                font-style: normal;
              }
               .active1{
                 background: #069254;
                 color: #fff;
               }
               .active2{
                 background: #069254;
                 color: #fff;
                 transition-delay: 0.2s;
               }
               .active3{
                 background: #069254;
                 color: #fff;
                 transition-delay: 0.4s;
               }
               .active4{
                 background: #069254;
                 color: #fff;
                 transition-delay: 0.6s;
               }
               >p{
                 position: absolute;
                 width: 31px;
                 bottom: -16px;
                 right: -5px;
               }
             }
             >span{
               overflow: hidden;
               display: block;
               margin-top: 11px;
               height: 4px;
             }
           }
         }
       }
     }
   }
  .info_wrap{
    margin-top: 20px;
    padding-top: 10px;
    background: #eee;
    font-weight: 500;
    padding-bottom: 10px;
    >div{
      background: #fff;
      >p{
        height: 25px;
        line-height:25px;
        >span{
          float: left;
          margin-left: 20px;
          width: 65px;
          text-align: right;
        }
        >b{
          float: left;
        }
        .red{
         color: #f10;
          font-weight: bold;
        }
        .green{
          color: #069254;
          font-weight: bold;
        }
      }
    }
  }
  .items_wrap{
    background: #fff;
    padding-top: 18px;
    >p{
      overflow: hidden;
      height: 14px;
      line-height: 14px;
      >span{
        float: left;
        margin-left: 30px;
        color: #888;
        font-weight: 500;
      }
      >b{
        float: right;
        margin-right: 22px;
        color: #888;
        font-weight: 500;
      }

    }
  }
  .items_content{
    padding: 1px 20px 12px 20px;
    >div{
      padding-top: 10px;
      border-top: 1px solid #ddd;
      margin-top: 8px;
      >p{
        float: left;
        width: 50px;
        height: 50px;
        line-height: 50px;
        >img{
          display: inline-block;
          width: 42px;
        }
      }
      >div{
        overflow: hidden;
        height: 50px;
        text-align: left;
        padding-left: 10px;
        padding-top: 5px;
        >p{
          font-size: 13px;
          height: 30px;
          color: #333;
          line-height: 15px;
        }
        >div{
          overflow: hidden;
          font-size: 14px;
          color: #999;
          >p{
            float: left;
          }
          >span{
            float: right;
            margin-right: 2px;
          }
        }
      }
    }
  }
  .show{
    width: 160px;
    margin: 10px auto 0 auto;
    height: 28px;
    background-image: url('../assets/img/show.png');
    background-size: 100% 100%;
    line-height: 28px;
    color: #3c82ca;
    letter-spacing: 1px;
  }
  .mini{
    width: 160px;
    margin: 10px auto 0 auto;
    height: 28px;
    background-image: url('../assets/img/show.png');
    background-size: 100% 100%;
    line-height: 28px;
    color: #3c82ca;
    letter-spacing: 1px;
  }
  .price_wrap{
    padding-top: 10px;
    margin-top: 20px;
    background: #eee;
    >div{
      padding-top: 9px;
      padding-left: 20px;
      padding-right: 20px;
      background: #fff;
      >p{
        height: 25px;
        line-height: 25px;
        text-align: left;
        >span{
          float: left;
        }
        >b{
          color: #f00;
          float: right;
        }
      }
    }

  }
  .pay_wrap{
    height: 50px;
    line-height: 50px;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #ddd;
    >span{
      float: left;
      margin-left: 6%;
      font-size: 14px;
    }
    >div{
      float: right;
      margin-right: 20px;
      >span{
        float: right;
        margin-left: 15px;
        height: 30px;
        line-height: 30px;
        margin-top: 9px;
        width: 64px;
        border-radius: 5px;
        background-color: #2096d4;
        color: #fff;
      }
      >span:last-child{
        background-color: #fff;
        border: 1px solid #777;
        color: #666;
      }
    }
  }
</style>
